<template>
  <div class="time-filter">
      <el-select v-model="timeSelected" 
      @change="selectChange">
          <el-option v-for="(item, idx) in timeOptions" 
          :key="idx"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
      <el-dialog
  title="选择自定义时间范围"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose"
  :append-to-body="true">
    <el-date-picker
      v-model="customTimeOption"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>
  <span slot="footer" class="dialog-footer">
    <el-button @click="timeSelectCancel">取 消</el-button>
    <el-button type="primary" @click="timeSelectConfirm">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>
<script>
import timePickerOptions from '@/helper/timePickerOptions'
import mSearch from '@/base/mixin/m-search'
import {mapState} from 'vuex'
import dateFormat from '@/utils/date'
export default {
    mixins: [mSearch],
    data () {
      return {
          pickerOptions: timePickerOptions,
          dialogVisible: false,
          timeSelected: 7,
          customTimeOption: null,
          oldSelect: 7,
          timeOptions: [
            {
              value: 7,
              label: '近7天'
            },
            {
              value: 15,
              label: '近15天'
            },
            {
              value: 30,
              label: '近30天'
            },
            {
              value: -1,
              label: '自定义'
            }
          ]
      }
    },
    computed: {
      ...mapState(['myStatistics_tab'])
    },
    methods: {
      timeSelectCancel() {
       this.dialogVisible = false;
       this.timeSelected = this.oldSelect;
      },
      timeSelectConfirm() {
       this.dialogVisible = false;
        this.$store.commit('myStatistics_query', {
          kssj: dateFormat(this.customTimeOption[0], 'yyyy-MM-dd HH:mm:ss'),
          jssj: dateFormat(this.customTimeOption[1], 'yyyy-MM-dd HH:mm:ss')
        })
      },
      selectChange(item) {
        if(item === -1) {
          this.dialogVisible = true;
        } else {
          this.oldSelect = item;
           this.$store.commit('myStatistics_query', {
             sjd: item
           })
        }
      }
    }
  }
</script>